<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <title>负责人申请页面</title>

</head>
<body>
<div class="row" th:replace="_fragments :: menu(4)"></div>

<th:block th:replace="_fragments :: script">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
</th:block>

<script type="text/javascript">
    $(document).ready(function () {
        $('.ui.form').form({
                name: {
                    identifier: 'name',
                    rules: [
                        {
                            type: 'empty',
                            prompt: '请输入姓名'
                        }
                    ]
                },
                age: {
                    identifier: 'age',
                    rules: [
                        {
                            type: 'integer[18..50]',
                            prompt: '有效年龄为18~50'
                        }
                    ]
                },
                add: {
                    identifier: 'userProvinceId',
                    rules: [
                        {
                            type: 'empty',
                            prompt: '请输入地址'
                        }
                    ]
                },
                card: {
                    identifier: 'card',
                    rules: [
                        {
                            type: 'regExp[/^[1-9]\\d{5}(18|19|20|(3\\d))\\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$/]',
                            prompt: '请输入有效身份证号码'
                        }
                    ]
                },
                reason: {
                    identifier: 'reason',
                    rules: [
                        {
                            type: 'empty',
                            prompt: '理由不能为空'
                        }
                    ]
                },
                plan: {
                    identifier: 'plan',
                    rules: [
                        {
                            type: 'empty',
                            prompt: '计划不能为空'
                        }
                    ]
                }
            },
            {
                on: 'blur',
                onSuccess: submitForm
            }
        );

        $('.ui.form').submit(function (e) {
            return false;
        });


    });

    function submitForm() {
        var p_id = $("input[name='userProvinceId']").val();
        var c_id = $("input[name='userCityId']").val();
        var t_id = $("input[name='userDistrictId']").val();
        var province;
        var city;
        var town;
        for (var i = 0; i < cityData.length; i++) {
            if (cityData[i].id === p_id) {    //有选择的输出json数据
                province = cityData[i].name;
            }
            if (cityData[i].id === c_id) {    //有选择的输出json数据
                city = cityData[i].name;
            }
            if (cityData[i].id === t_id) {    //有选择的输出json数据
                town = cityData[i].name;
            }
        }
        var location = province + "-" + city + "-" + town;
        console.log(location);
        $.ajax({
            url: "/user/lead/" + location,
            type: "get",
            dataType: "json",
            data: $("#ap form").serialize(),
            success: function (result) {
                if (result.code === 500) {
                    alert("您是管理员，无法参与");
                } else if (result.code === 100) {
                    alert("管理员审核中...");
                } else if(result.code === 200){
                    alert("申请成功，请等待管理员审核...")
                }else if(result.code === 400){
                    alert("申请成功，请等待管理员审核...")
                }else{
                    alert("您已是负责人");
                }
            }
        });
    }


</script>

<div class="m-container m-padded-tb-big animated fadeIn" id="ap">
    <div class="ui container">
        <div class="ui stackable grid">
            <div class="three wide column"></div>
            <div class="m-padding-lr m-mobile-lr-clear">
                <div class="ten wide column">
                    <form class="ui form segment">
                        <h2 class="ui header m-padded-tb" style="text-align: center!important;">负责人申请表</h2>
                        <h4 class="ui dividing header">基本信息(Basic information)</h4>
                        <div class="field">
                            <div class="three fields">
                                <label class="m-text-l-h m-padded-lr-mini">姓名:</label>
                                <div class="field four wide column">
                                    <input type="text" name="name" placeholder="Name">
                                </div>
                                <label class="m-text-l-h m-padded-lr-mini">性别:</label>
                                <div class="field four wide column" style="line-height: 43px!important;">
                                    <select class="ui dropdown" name="sex">
                                        <option value="0" checked>Male</option>
                                        <option value="1">Female</option>
                                    </select>
                                    </select>
                                </div>
                                <label class="m-text-l-h m-padded-lr-mini">年龄:</label>
                                <div class="field four wide column">
                                    <input type="text" name="age" placeholder="Age">
                                </div>
                            </div>
                        </div>
                        <div class="field">
                            <div class="three fields">
                                <label class="m-text-l-h m-padded-lr-mini">地址:</label>
                                <div class="city-picker-selector" id="city-picker-search"
                                     style="z-index: 99!important;">
                                    <div class="selector-item storey province">
                                        <a href="#" class="selector-name reveal df-color forbid" id="pro">请选择省份</a>
                                        <input type="text" class="input-price val-error" value="" name="userProvinceId"
                                               data-required="userProvinceId">
                                        <div class="selector-list listing hide">
                                            <div class="selector-search">
                                                <input type="text" class="input-search" value="" placeholder="拼音、中文搜索">
                                            </div>
                                            <ul>
                                                <li>北京市</li>
                                                <li>天津市</li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="selector-item storey city">
                                        <a href="#" class="selector-name reveal df-color forbid">请选择城市</a>
                                        <input type="hidden" name="userCityId" class="input-price val-error" value=""
                                               data-required="userCityId">
                                        <div class="selector-list listing hide">
                                            <div class="selector-search">
                                                <input type="text" class="input-search" value="" placeholder="拼音、中文搜索">
                                            </div>
                                            <ul></ul>
                                        </div>
                                    </div>
                                    <div class="selector-item storey district">
                                        <a href="javascript:;" class="selector-name reveal df-color forbid">请选择区县</a>
                                        <input type="hidden" name="userDistrictId" class="input-price val-error"
                                               value=""
                                               data-required="userDistrictId">
                                        <div class="selector-list listing hide">
                                            <div class="selector-search">
                                                <input type="text" class="input-search" value="" placeholder="拼音、中文搜索">
                                            </div>
                                            <ul></ul>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="field">
                                <div class="two fields">
                                    <label class="m-text-l-h m-padded-lr-mini"
                                           style="color: rgba(0,0,0,.87)!important;">身份证:</label>
                                    <div class="field seven wide column">
                                        <input type="text" name="card" placeholder="Id card">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h4 class="ui dividing header">申请理由(Reason for application)</h4>
                        <div class="field">
                            <textarea name="reason"></textarea>
                        </div>

                        <h4 class="ui dividing header">活动计划(Activity plan)</h4>
                        <div class="field">
                            <textarea name="plan"></textarea>
                        </div>
                        <div class="ui primary submit button" id="ok">提交(Submit)</div>
                        <br><br>
                        <div class="ui error mini message"></div>
                        <br><br>
                    </form>
                </div>
            </div>
            <div class="three wide column"></div>
        </div>
    </div>
</div>
<script type="text/javascript" src="../static/js/citydata.js"></script>
<script type="text/javascript" src="../static/js/cityPicker-1.0.0.js?v=1"></script>

<script>
    //模拟城市-联动/搜索
    $('#city-picker-search').cityPicker({
        dataJson: cityData,
        renderMode: true,
        search: true,
        linkage: true
    });
</script>
</body>
</html>